<template>
    <div class="container">
        <mt-header title="收货地址">
            <router-link :to="historyUrl" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button slot="right" @click="addnewAddress">新增地址</mt-button>
        </mt-header>
        <div v-if="noAddress">
            <span class="noAddressClass">暂无地址，请新增</span>
        </div>
        <div v-if="!noAddress">
            <div class="bodyContainer" v-for="(obj,index) in address.address" :key="index">
                <div>
                    <span>
                        <span class="addressNameClass" @click="setDefaultUserAddress(index)">{{obj.address.name}}</span>
                        <span class="tagClass" @click="setDefaultUserAddress(index)">{{tag[obj.tag]}}</span>
                        <span class="delete" @click="deleteAddress(index)">×</span>
                    </span>
                </div>
                <div v-if="obj.address.address!=''">
                    <span class="addressTipClass">{{obj.address.address}}</span>
                </div>
                <div>
                    <span class="userMessage">
                        <span @click="setDefaultUserAddress(index)">
                            <span>{{obj.name}}({{sex[obj.sex]}})</span>
                            <span>{{obj.phoneName}}</span>
                        </span>
                        <img src="../images/修改.svg" @click="modifyAddress(index)">
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapState,mapMutations} from 'vuex'
    import axios from 'axios'
    export default{
        data(){
            return{
                sex:['','先生','女士'],
                tag:['','家','公司','学校'],
                noAddress:false,
            }
        },
        computed:{
            ...mapState(['address','historyUrl']),
        },
        mounted(){
            //获取地址
            let tokenStr=window.sessionStorage.getItem('tokenStr');
            axios({
                method:'post',
                url:'/users/getUsersAddress',
                headers:{
                    "Content-Type":"application/json",
                    'Authorization':tokenStr,
                }
            }).then(response=>{
                if(response.code==200){
                    console.log('获取地址成功');
                    if(response.obj==null||response.obj.address.length==0){
                        this.noAddress=true;
                    }else{
                        this.noAddress=false;
                        this.setAddressList(response.obj);
                    }   
                }
            });
        },
        methods:{
            ...mapMutations(['setHistory','setModifyId','setAddressList','initAddAddressMessage']),
            addnewAddress(){
                this.setModifyId("");
                this.initAddAddressMessage();
                this.$router.push('buyAddress');
            },
            modifyAddress(index){
                this.setModifyId(index);
                this.initAddAddressMessage();
                this.$router.push('buyAddress');
            },
            async deleteAddress(index){
                let postData=this.$qs.stringify({
                    addressId:index
                });
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                await this.postRequest('/users/delUsersAddress',postData,tokenStr).then(response=>{
                    console.log(response);
                    if(response.code==200){
                        console.log('删除地址成功');
                        this.$router.push(this.historyUrl);
                    }
                });
            },
            async setDefaultUserAddress(index){
                let postData=this.$qs.stringify({
                    addressId:index
                });
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                await this.postRequest('/users/setDefaultUsersAddress',postData,tokenStr).then(response=>{
                    console.log(response);
                    if(response.code==200){
                        console.log('修改默认地址成功');
                        if(this.historyUrl=='account')
                            this.$router.push('account');
                    }
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    *{
        margin: 0;
        padding: 0;
    }
    .noAddressClass{
        display: block;
        margin-top: 2rem;
        @include width-height(100%,3rem);
        @include font-size-color(1.5rem,#000);
        text-align: center;
    }
    .bodyContainer{
        margin: 0.5rem 0 0.5rem 0.3rem;
        padding-left: 0.5rem;
        border-bottom: 1px solid #f1f1f1;
        position: relative;
        .addressNameClass{
            @include font-size-color(1.3rem,#000);
        }
        .delete{
            position :absolute;
            right: 0.5rem;
            top: 0;
        }
        .tagClass{
            @include font-size-color(1rem,rgb(73, 158, 84));
            background-color: rgb(234, 253, 236);
            border:1px solid rgb(73, 158, 84);
            padding: 0 0.3rem 0 0.3rem;
            border-radius: 0.2rem;
            margin-left: 0.5rem;
        }
        .addressTipClass{
            @include font-size-color(1.1rem,#000);
            display:inline-block;
            height: 1.8rem;
        }
        .userMessage{
            @include font-size-color(1.1rem,#666);
            display:inline-block;
            height: 2rem;
        }
        img{
            @include width-height(25px,25px);
            position :absolute;
            right: 2rem;
            top: 2rem;
        }
    }
</style>
